<template>
  <ElDialog
    v-model="dialogVisible"
    :title="title"
    width="800"
    :before-close="handleClose"
  >
    <div class="searchTable">
      <ElRow class="search-color">
        <ElCol :span="12">
          <span class="search-text">机场名称：</span>
          <ElInput
            v-model="airportName"
            style="width: 70%"
            @input="spaceInput"
            placeholder="请输入机场名称"
          />
        </ElCol>
        <ElCol :span="12" class="t-r">
          <ElButton type="primary" @click="debouncedSearch">查询</ElButton>
          <ElButton @click="resetForm()">重置</ElButton>
        </ElCol>
      </ElRow>
    </div>
    <div class="tablePage">
      <div style="margin-bottom: 20px">
        <ElTable :data="tableData" stripe style="width: 100%" row-key="id">
          <ElTable.TableColumn
            prop="airportName"
            label="机场名称"
            align="center"
            show-overflow-tooltip
          />
          <!-- <ElTable.TableColumn
            prop="description"
            label="机场描述"
            align="center"
            show-overflow-tooltip
          /> -->
          <ElTable.TableColumn
            prop="modelName"
            label="无人机型号"
            align="center"
          />
          <ElTable.TableColumn prop="status" label="机场状态" align="center">
            <template #default="scope">
              <span
                @click="rowClick(scope.row)"
                :style="{
                  color: scope.row.status == '离线' ? '#F56C6C' : '#67C23A',
                }"
              >
                {{ scope.row.status == "离线" ? "离线" : "在线" }}
              </span>
            </template>
          </ElTable.TableColumn>
          <ElTable.TableColumn
            prop="droneNums"
            label="关联无人机数量"
            align="center"
          />
          <ElTable.TableColumn fixed="right" label="操作" align="center">
            <template #default="scope">
              <el-button
                link
                type="primary"
                size="small"
                @click="rowClick(scope.row)"
              >
                选择
              </el-button>
            </template>
          </ElTable.TableColumn>
        </ElTable>
      </div>
    </div>
    <div class="pagination">
      <ElPagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 80, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <ElButton @click="handleClose">取消</ElButton>
        <ElButton type="primary" @click="submitForm(ruleFormRef)">
          确定
        </ElButton>
      </div>
    </template>
  </ElDialog>
</template>
<script lang="ts" setup>
import {
  ElDialog,
  ElButton,
  ElInput,
  ElMessage,
  ElTable,
  ElPagination,
  ElRow,
  ElCol,
} from "element-plus";
import { reactive, ref } from "vue";
import { getAirportList } from "#/api/sys/equipment";
import { useDebounceFn } from "@vueuse/core";
const emit = defineEmits(["airportRow"]);
const dialogVisible = ref(false);
const title = ref("选择机场");
const id = ref("");
const airportName = ref("");
const tableData = ref([]);
let currentPage = ref(1);
let pageSize = ref(10);
let total = ref(0);
const spaceInput = (value: string) => {
  // 过滤空格
  airportName.value = value.replace(/\s+/g, "");
};

const search = async () => {
  const params = {
    airportName: airportName.value,
    currentPage: currentPage.value,
    pageSize: pageSize.value,
  };
  try {
    const { data } = await getAirportList(params);
    if (data.records.length > 0) {
      data.records.map((item) => {
        item.status = item.status + "";
      });
      tableData.value = data.records;
      total.value = data.total;
    } else {
      tableData.value = [];
      total.value = 0;
    }
  } catch (err) {
    ElMessage.error("加载数据失败");
  }
};
const debouncedSearch = useDebounceFn(search, 500);

const addDialog = () => {
  dialogVisible.value = true;
  search();
};

const editDialog = (obj) => {
  dialogVisible.value = true;
  id.value = obj.id;
  search();
};

defineExpose({ addDialog, editDialog });

const handleSizeChange = (val) => {
  pageSize.value = val;
  search();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  search();
};

const submitForm = async (formEl) => {
  dialogVisible.value = false;
};

const resetForm = (formEl) => {
  airportName.value = "";
  currentPage.value = 1;
  search();
};
const rowClick = (item) => {
  emit("airportRow", item);
  dialogVisible.value = false;
};

const handleClose = (done: () => void) => {
  dialogVisible.value = false;
};
</script>
<style lang="scss" scoped>
.tablePage {
  height: 50vh;
  margin-top: 20px;
  overflow-y: auto;
}

.tablePage::-webkit-scrollbar {
  width: 2px;
}
</style>
